<!-- 飞线配置 -->
<template>
  <div style="margin-top:16px">
    <el-form-item label="相对坐标">
      <el-switch v-model="myConfig.relative" class="float_right"></el-switch>
    </el-form-item>
    <el-form-item label="透明度" class="form_item_margin">
      <el-slider
        v-model="myConfig.opacity"
        :show-tooltip="false"
        class="slider136 r_margin_right8"
      >
      </el-slider>
      <el-input
        v-model.number="myConfig.opacity"
        class="r_56width"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <span slot="suffix" style="line-height: 32px">%</span>
      </el-input>
    </el-form-item>
    <el-form-item label="背景图">
      <l-img-select v-model="myConfig.bgImgSrc" />
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
    <el-collapse accordion>
      <el-collapse-item title="光晕属性">
        <el-form-item label="是否显示">
          <el-switch
            v-model="myConfig.halo.show"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item label="动画时长" style="color: #a2a2a2">
          <span class="r_96width r_margin_right8 l_input_span">
            <el-input-number
              v-model="myConfig.halo.duration.x"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">秒</span>
          </span>
          <span class="r_96width l_input_span">
            <el-input-number
              v-model="myConfig.halo.duration.y"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">秒</span>
          </span>
        </el-form-item>
        <el-form-item label="颜色">
          <l-input-color v-model="myConfig.halo.color"></l-input-color>
        </el-form-item>
        <el-form-item label="最大半径">
          <el-input-number v-model="myConfig.halo.radius"></el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="点名称属性">
        <el-form-item label="是否显示">
          <el-switch
            v-model="myConfig.text.show"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item label="位置偏移">
          <el-input-number
            v-model="myConfig.text.offset.x"
            controls-position="right"
            class="r_96width r_margin_right8"
          >
          </el-input-number>
          <el-input-number
            v-model="myConfig.text.offset.y"
            controls-position="right"
            class="r_96width"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item :label="$t('文字')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.text.color"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.text.color"
            class="r_96width r_margin_right8"
          >
          </el-input>
          <el-input
            v-model="myConfig.text.fontSize"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="点图标属性">
        <el-form-item label="是否显示">
          <el-switch
            v-model="myConfig.icon.show"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item label="图标">
          <l-img-select v-model="myConfig.icon.src" />
        </el-form-item>
        <el-form-item :label="$t('尺寸')">
          <span class="r_96width r_margin_right8 l_input_span">
            <el-input-number
              v-model="myConfig.icon.width"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">W</span>
          </span>
          <span class="r_96width l_input_span">
            <el-input-number
              v-model="myConfig.icon.height"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">H</span>
          </span>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="飞线属性">
        <el-form-item :label="$t('飞线')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.line.color"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.line.color"
            class="r_96width r_margin_right8"
          >
          </el-input>
          <el-input
            v-model="myConfig.line.width"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
        <el-form-item label="轨迹颜色">
          <l-input-color v-model="myConfig.line.orbitColor"></l-input-color>
        </el-form-item>
        <el-form-item label="动画时长" style="color: #a2a2a2">
          <span class="r_96width r_margin_right8 l_input_span">
            <el-input-number
              v-model="myConfig.line.duration.x"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">秒</span>
          </span>
          <span class="r_96width l_input_span">
            <el-input-number
              v-model="myConfig.line.duration.y"
              controls-position="right"
              class="r_96width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num2">秒</span>
          </span>
        </el-form-item>
        <el-form-item label="显示半径">
          <el-input v-model="myConfig.line.radius"></el-input>
        </el-form-item>
        <el-form-item label="飞线曲率" class="form_item_margin">
          <el-slider
            v-model="myConfig.line.curvature"
            :min="1"
            :max="10"
            :show-tooltip="false"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
        <el-form-item label="收束程度" class="form_item_margin">
          <el-slider
            v-model="myConfig.line.k"
            :min="-1"
            :max="1"
            :step="0.1"
            :show-tooltip="false"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <hr class="hr_color" style="margin-bottom: 2px" />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      min: -360,
      max: 360,
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  methods: {},
};
</script>

<style>
</style>